<template>
	<view class="">
		<image class="image-1" src="../../static/24792@2x.png" mode=""></image>
		<view class="header">
			<!-- <view class="header-title"> -->
			<!-- <text>{{detail.name}}</text> -->
			<!-- </view> -->
			<view class="header-big">
				<text>{{ Math.floor(detail.yieldRates*10000)/100}}</text>
			</view>
			<view class="header-des">
				<text>{{detail.investmentScope}}</text>
			</view>
			<view class="header-bottom">
				<view class="h-left">
					<view>
						<text>{{detail.period}}</text>
					</view>
					<text class="h-left-t">产品期限(天)</text>
				</view>
				<view class="h-left">
					<view class="">
						<text>{{detail.minimumMoney}}</text>
					</view>
					<text class="h-left-t">起购价格</text>
				</view>
			</view>



		</view>

		<view class="main">
			<view class="lantiao">
				<text>投资周期</text>
			</view>

			<view class="main-mid">
				<view class="mid-top">
					<view :key="m" v-for="(i,m) in time" class="top-item">
						<view class="ball">
							<view class="ball-ball">
							</view>
						</view>
						<view>
							<text>{{i.type}}</text>
						</view>
						<view class="ball-bottom">
							<text>{{i.date}}</text>
						</view>
					</view>
				</view>

				<view class="main-bottom">
					<view class="bottom-left">
						<text>购买说明</text>
					</view>
					<view class="bottom-right">
						<view class="right-text">
							<text>每28天为一期，可在到期开放日追加购买或领取；若未领取则默认持续存至下一期</text>
						</view>
						<view class="right-text1">
							<text>*当期实际期限以投资周期展示位准，收益按当期实际计息天数计算</text>
						</view>
					</view>
				</view>
			</view>

			<view class="lantiao">
				<text>安全保障</text>
			</view>

			<view class="main-mid">
				<view class="icons">
					<view class="icons-item">
						<image class="icon-img" src="../../static/zhengfu.png" mode=""></image>
					</view>
					<view class="icons-item">
						<image class="icon-img" src="../../static/chayan.png" mode=""></image>

					</view>
					<view class="icons-item">
						<image class="icon-img" src="../../static/anquanyinsi.png" mode=""></image>
					</view>
				</view>
				<view class="icons icons-t">
					<view class="">
						<text>知名金融机构</text>
					</view>
					<view class="">
						<text>精选优质产品</text>
					</view>
					<view class="">
						<text>监管机构备案</text>
					</view>
				</view>

				<view class="mid-bottom">
					<text>该产品属于债券型资冠产品，风险较低</text>
				</view>
			</view>

			<view class="titles">
				<view @click="activeNum=0" :class="['title-item',activeNum==0?'active':'']">
					<text>交易规则</text>
				</view>
				<view @click="activeNum=1" :class="['title-item',activeNum==1?'active':'']">
					<text>信息披露</text>
				</view>
				<view @click="activeNum=2" :class="['title-item',activeNum==2?'active':'']">
					<text>常见问题</text>
				</view>
			</view>


			<!-- 交易规则 -->
			<view class="choose-rules" v-if="activeNum==0">
				<view class="main-mid">
					<view class="mid-title">
						<text>购买与领取</text>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>购买金额</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.minimumMoney}}元起购</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>领取金额</text>
						</view>
						<view class="mid-contain">
							<text>1000元起，剩余金额不低于1000元</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>到账说明</text>
						</view>
						<view class="mid-contain">
							<text>资金将在领取后的2个交易日内回到原购买银行卡</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>开放日</text>
						</view>
						<view class="mid-contain">
							<text>可在开放日10点～15点领取，也可在开放日之前预约领取；若未领取则默认续存至下一期。如开放日遇到非交易日，可能顺延或提前开放，手机按实际计息天数计算</text>
						</view>
					</view>
				</view>

				<view class="main-mid">
					<view class="mid-title">
						<text>收益与费用</text>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>收益规则</text>
						</view>
						<view class="mid-contain">
							<text>购买的下一个交易日开始计算收益，节假日照常计算，收益每日累积、按周期发放（28）天，现金收益将在2个交易日内直接发放至原购买银行卡</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>费用规则</text>
						</view>
						<view class="mid-contain">
							<text>购买及领取均无手续费</text>
						</view>
					</view>
				</view>

				<view class="main-mid">
					<view class="mid-title">
						<text>支持银行列表</text>
					</view>
					<view class="table">
						<uni-table border>
							<uni-tr>
								<uni-th align="center" width="210rpx">银行列表</uni-th>
								<uni-th align="center" width="210rpx">单笔限额(元)</uni-th>
								<uni-th align="center" width="210rpx">单日限额(元)</uni-th>
							</uni-tr>
							<uni-tr v-for="(bank,s) in banks" :key="s">
								<uni-td align="center">
									<image class="table-img" :src="bank.bankimgSrc"></image>
									<text>{{bank.bankName}}</text>
								</uni-td>
								<uni-td align="center">
									<text>{{bank.singleLimit}}</text>
								</uni-td>
								<uni-td align="center">{{bank.dayLimit}}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>




			</view>
			<!-- 信息披露 -->
			<view class="choose-message" v-else-if="activeNum==1">
				<view class="main-mid">
					<view class="mid-title">
						<text>基本信息</text>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>产品类型</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.productType}}</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>产品名称</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.fname}}</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>成立日期</text>
						</view>
						<view class="mid-contain">
							<text>2012年9月18日</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>管理人</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.custodian}}</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>托管人</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.trustee}}</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>投资范围</text>
						</view>
						<view class="mid-contain">
							<text>主要投资于固定收益类资产，包括国债、央行票据、金融债、公司债、企业债、可转换债券，资产支持证券，股票质押式回购等，安全性高。</text>
						</view>
					</view>
					<view class="mid-1">
						<view class="mid-name">
							<text>基金经理</text>
						</view>
						<view class="mid-contain">
							<text>{{detail.fundManager.mname}}{{detail.fundManager.calls}}，{{detail.fundManager.graduateSchool}}{{detail.fundManager.department}}{{detail.fundManager.educationLevel}}，{{detail.fundManager.background}}
							</text>
						</view>
					</view>

				</view>
				<view class="main-mid">
					<view class="mid-title">
						<text>查看协议</text>
					</view>
					<view class="mid-1">
						<text>《管理合同》</text>
					</view>
					<view class="mid-1">
						<text>《说明书》</text>
					</view>
					<view class="mid-1">
						<text>《风险揭示书》</text>
					</view>
					<view class="mid-1">
						<text>《电子签名约定书》</text>
					</view>
					<view class="mid-1">
						<text>《服务协议及权益通知》</text>
					</view>
				</view>
			</view>
			<!-- 常见问题 -->
			<view class="choose-questions" v-else>
				<view class="main-mid ">
					<view class="main-message">
						<view class="top-right">
							<text>什么是券商资管产品</text>
						</view>

					</view>
					<view class="mid-2">
						<text>券商资管是一款由证券公司或其资管子公司出品的资产管理计划，由具备资质的证券公司发行并管理，收证监会监管，投资品种涵盖了证券交易所和银行间市场的资产；具有集合理财，专业管理，组合投资，分散风险的特点。</text>
					</view>

					<view class="main-message">
						<view class="top-right">
							<text>什么是开放日？</text>
						</view>

					</view>
					<view class="mid-2">
						<text>资管产品按周期运作，一般在约定开放日的10点～15点，向投资人开放购买/领取；其余时间均封闭运作。若约定的开放日为非交易日，资管公司可能提前开放或顺延，具体以资管公司的公告为准。</text>
					</view>

					<view class="main-message">
						<view class="top-right">
							<text>什么是时候产生收益？收益什么时候发放？</text>
						</view>

					</view>
					<view class="mid-2">
						<text>该产品预计于购买的下个交易日（T+1日），或产品详情页中载明的日期开始计算收益；每期到期后自动发放收益，收益按当期实际计息天数结算，具体以各产品信息展示为准。</text>
					</view>



				</view>
			</view>
			<!-- 计算器和购买按钮 -->
			<view class="bottom-bottom">
				<view @click="showCop" class="b-left">
					<image src="../../static/a9.png" mode=""></image>
				</view>
				<view class="b-right">
					<view class="button">立即购买</view>
				</view>
			</view>

			<!-- 计算器弹出框 -->
			<wyb-popup showCloseIcon ref="popup" type="bottom" height="500" maskClickClose width="100" radius="10"
bgColor="#f3f3f3">
				<view class="po-title">
					<text>收益计算器</text>
				</view>
				<view class="popup-input">
					<text>投资金额(元)：</text>
				</view>
				<view class="popup-input">
					<input type="text" v-model="money" />
				</view>

				<view class="popup-input">
					<text>据业绩比较基准28天后可赚：</text>
				</view>
				<view class="popup-input">
					<input class="bonus" disabled type="text" :value="bonus" />
				</view>
				<view class="po-button">
					<view @click="hideCop">
						<text>返回</text>
					</view>
				</view>
			</wyb-popup>







		</view>







	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	export default {
		data() {
			return {
				money: 1000,
				bonus: 26.85,
				time: [{
					type: '购买',
					date: '2021/3/15'
				}, {
					type: '计算收益',
					date: '2021/3/18'
				}, {
					type: '发放收益',
					date: '2021/4/10'
				}, {
					type: '到账',
					date: '2个交易日内'
				}],
				detail: {
					_id: 0,
					name: '券商资管 | 齐鲁锦泉28天',
					percent: '3.05',
					des: '业绩比较基准',
					days: '28天',
					price: '50000',
					from: '券商出品 | 低风险',
					types: [
						'限时抢购',
					],
					
				},
				activeNum: 0,
				banks: [{
					bankName: '工行',
					bankimgSrc: '../../static/a1.png',
					singleLimit: '5万',
					dayLimit: '5万'
				}, {
					bankName: '农行',
					singleLimit: '5000',
					dayLimit: '5000',
					bankimgSrc: '../../static/a2.png'
				}, {
					bankName: '中行',
					singleLimit: '20万',
					dayLimit: '20万',
					bankimgSrc: '../../static/a3.png'
				}, {
					bankName: '建行',
					singleLimit: '10万',
					dayLimit: '10万',
					bankimgSrc: '../../static/a4.png'
				}, {
					bankName: '交行',
					singleLimit: '10万',
					dayLimit: '10万',
					bankimgSrc: '../../static/a5.png'
				}, {
					bankName: '招行',
					singleLimit: '5000',
					dayLimit: '5000',
					bankimgSrc: '../../static/a6.png'
				}, {
					bankName: '广发',
					singleLimit: '200万',
					dayLimit: '200万',
					bankimgSrc: '../../static/a7.png'
				}, {
					bankName: '平安',
					singleLimit: '5万',
					dayLimit: '5万',
					bankimgSrc: '../../static/a8.png'
				}, 
				],
				manager:{}
			}
		},
		components: {
			wybPopup
		},
		onLoad(option) {
			console.log(option);
			this.getRegularByFid(option.id);
			this.getBanks();
			this.getManagers();
		},
		methods: {
			showCop() {
				this.$refs.popup.show() // 显示
			},
			hideCop() {
				this.$refs.popup.hide()
			},
			async getBanks() {
				const res = await this.$http.regular.getBanks({
					limit: 10,
					page: 1
				});
				// this.banks = res.data.list
			},
			async getManagers() {
				const res = await this.$http.regular.getManagers();
				const i =  Math.floor(Math.random() * res.data.length);
				console.log(res);
				console.log(i);
				this.manager = res.data[i];
			},
			async getRegularByFid(fid){
				const res = await this.$http.regular.getRegularByFid(fid);
				console.log(res);
				this.detail = res.data
			}
		},
	}
</script>

<style scoped lang="scss">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.image-1 {
		width: 750rpx;
		height: 428rpx;
	}

	.header {
		position: absolute;
		left: 0;
		width: 750rpx;
		height: 428rpx;
		top: 0;
		text-align: center;
		color: #FFFFFF;


		.header-big {
			font-size: 60rpx;
			line-height: 60rpx;
			margin-top: 40rpx;
			font-weight: bold;
		}

		.header-des {
			font-size: 24rpx;
			margin-top: 32rpx;
		}

		.header-bottom {
			width: 750rpx;
			display: flex;
			font-size: 24rpx;
			margin-top: 40rpx;
			justify-content: space-between;

			.h-left {
				width: 344rpx;
				height: 80rpx;
				font-size: 40rpx;
				font-weight: bold;

				.h-left-t {
					font-weight: normal;
					font-size: 24rpx;
				}
			}

		}
	}

	.main {
		position: absolute;
		top: 340rpx;
		background-color: #FFFFFF;
		border-radius: 42rpx 42rpx 0 0;
		padding-left: 24rpx;
		padding-right: 24rpx;
		width: 702rpx;

		.lantiao {
			margin-top: 42rpx;
			width: 702rpx;
			height: 32rpx;
			line-height: 32rpx;
			font-size: 32rpx;
			font-weight: bold;
			border-left: 8rpx solid #3476f1;
			padding-left: 10rpx;
		}

		.main-mid {
			margin-top: 24rpx;
			box-shadow: 0 0 30rpx 0 #eee;
			// height: 400rpx;
			// width: 702rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.mid-top {
				margin-top: 40rpx;
				// height: 130rpx;
				// width: 642rpx;s
				border-top: 4rpx dotted #f8f8f8;
				padding-bottom: 30rpx;
				border-bottom: 4rpx solid #f8f8f8;
				display: flex;
				padding-top: 32rpx;
				font-size: 24rpx;

				.top-item {
					position: relative;
					flex-grow: 1;
					text-align: center;
					color: #666666;

					&:first-child {
						.ball-ball {
							background-color: #3476f1;
							border: 0;
						}
					}
				}

				.ball {
					top: -42rpx;
					width: 100%;
					left: 0rpx;
					position: absolute;



					.ball-ball {
						margin: 0 auto;
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						background-color: #FFFFFF;
						border: 2rpx solid #dddddd;
					}
				}

				.ball-bottom {
					margin-top: 18rpx;
					color: #999999;
				}
			}


		}
	}

	.main-bottom {
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.bottom-left {
		float: left;
		color: #999999;
		font-size: 28rpx;
	}

	.bottom-right {
		float: left;
		font-size: 24rpx;
		line-height: 44rpx;
		margin-left: 30rpx;
		margin-top: -6rpx;
		width: 490rpx;
		color: #333333;

	}

	.icons {
		margin-top: 30rpx;
		padding-left: 56rpx;
		padding-right: 56rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;

		.icons-item {
			width: 94rpx;
			height: 94rpx;
			line-height: 124rpx;
			border: 2rpx solid #3476f1;
			border-radius: 50%;

			.icon-img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.icons-t {
		font-size: 24rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		color: #666666;
		margin-bottom: 30rpx
	}

	.mid-bottom {
		padding-top: 30rpx;
		border-top: 2rpx solid #f7f7f7;
		color: #333333;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}

	.titles {
		display: flex;
		margin-top: 26rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 68rpx;

		.title-item {
			&:not(:first-child) {
				margin-left: 60rpx;
			}
		}

		.active {
			font-size: 32rpx;
			color: #3476f1;
			font-weight: bold;
			line-height: 60rpx;
			border-bottom: 4rpx solid #3476f1;
		}
	}

	.mid-title {
		// margin-top: 30rpx;
		line-height: 88rpx;
		height: 88rpx;
		color: #333333;
		font-size: 28rpx;
		border-bottom: 2rpx solid #fbfbfb;
	}

	.mid-1 {
		display: flex;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #fbfbfb;
		font-size: 24rpx;
		color: #333333;

		.mid-name {
			width: 100rpx;
			color: #999999;
		}

		.mid-contain {
			width: 510rpx;
			color: #333333;
			margin-left: 30rpx;
			line-height: 48rpx;
			margin-top: -6rpx;
		}
	}

	.table-img {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 20rpx;
		margin-top: -6rpx;
	}

	.bottom-bottom {
		display: flex;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 36rpx;
		margin-bottom: 50rpx;

		.b-left image {
			width: 24rpx;
			height: 32rpx;
		}

		.b-right {
			width: 640rpx;
			margin-left: 40rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			background-color: #3476f1;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
		}
	}

	.main-message {
		position: relative;
		height: 126rpx;
	}

	.top-right {
		height: 86rpx;
		line-height: 86rpx;
		font-size: 28rpx;
		background-color: #3476f1;
		color: #FFFFFF;
		border-radius: 12rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		width: fit-content;
		margin-top: 40rpx;
		position: absolute;
		right: 0;
		// top: 0;
	}

	.mid-2 {
		font-size: 28rpx;
		padding: 30rpx;
		color: #666666;
		margin-top: 40rpx;
		line-height: 48rpx;
		border-radius: 12rpx;
		border: 2rpx solid #f7f7f7;
	}

	.po-title {
		font-size: 24rpx;
		padding-top: 16rpx;
		color: #999999;
		text-align: center;
	}

	.popup-input {
		font-size: 24rpx;
		color: #999999;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 50rpx;

		input {
			background-color: #ffffff;
			padding-left: 20rpx;
		}

		.bonus {
			color: #F96565;
		}
	}

	.po-button {
		font-size: 24rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #E1E1E1;
		margin-top: 90rpx;
		color: #999999;
		text-align: center;
	}
</style>
